<template>
  <div>
    <ul id="course-nav" class="nav nav-tabs" >
      <li v-for="courseInfo in coursesInfo">
        <a v-on:click="getArticleList(courseInfo.id)"
           href="javascript:void(0)" data-toggle="tab">{{ courseInfo.className }}</a>
      </li>
    </ul>
    <div class="panel-group article-list" id="accordion" role="tablist" aria-multiselectable="true">
        <article-panel
          v-for="(article, index) in articleList" v-bind:article="article"
          v-bind:index="index" v-bind:key="article.id"></article-panel>
    </div>
  </div>
</template>

<script>
  import ArticlePanel from '@/components/Chat/ArticlePanel.vue'
  export default {
    components: {
      'article-panel': ArticlePanel,
    },
    mounted() {
      //组件开始挂载时获取用户信息
      this.getCourseList();
    },
    computed: {
      coursesInfo() {
        return this.$store.state.coursesInfo
      },
      articleList() {
        return this.$store.state.articleList
      }
    },
    methods: {
      getArticleList(id) {
        let store = this.$store;
        $.ajax({
          url : "http://123.206.80.54:7000/forum/list",
          type : "POST",
          data : {
            classId : id,
            page : 1
          },
          dataType: "json",
          success : function(status, error, res) {
            store.dispatch('changeArticleList', res.responseJSON.res)
          }
        })

      },
      getCourseList() {
        let store = this.$store;
        $.ajax({
          url : "http://123.206.80.54:7000/class/query",
          type : "POST",
          data : {
            loginToken: $.cookie('loginToken')
          },
          dataType: "json",
          success : function(status, error, res) {
            store.dispatch('changeCourseList', res.responseJSON.res)
          }
        })
      }
    }
  }

</script>
